<template>
    <qf-table :tableLoading="tableLoading" :tableData="tableData" :columns="columns">
        <!-- 头像显示 -->
        <template v-slot:imageUrl="{ row }">
            <!-- <el-avatar shape="square" :src="row.imageUrl"></el-avatar> -->
            <img :src="row.imageUrl" width="100">
        </template>
        <template v-slot:action="{ row }">
            <!-- 自定义图标 -->
            <el-button type="success" @click="goPreOrder(row)">
                <template #icon>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chongzhi"></use>
                    </svg>
                </template>
                <!-- 自定义语法 -->
                <template #default>
                    点击充值
                </template>
            </el-button>
        </template>

    </qf-table>


</template>
<script setup>
import qfTable from "@/components/qfTable/index.vue"
//引入发起请求的方法
import * as api from "@/api/pay"
import { ref } from "vue"
import { ElMessageBox, ElMessage } from "element-plus"
import { useRouter } from "vue-router"
let router = useRouter()
//动态定义表头
let columns = [
    {
        label: '产品图片',
        prop: 'imageUrl'
    },
    {
        label: '产品名称',
        prop: 'productName'
    },
    {
        label: '产品描述',
        prop: 'description'
    },
    {
        label: '产品价格',
        prop: 'price'
    },
    {
        label: '库存',
        prop: 'inventory'
    },
    {
        label: '充值',
        prop: 'action'
    }
]

//声明一个数据，用于注入表格
let tableData = ref([])


//声明控制加载动画的变量
let tableLoading = ref(false)


//获取产品
let getList = async () => {
    tableLoading.value = true
    try {
        let res = await api.getCategoryApi()
        tableData.value = res.data.data.reverse()
        tableLoading.value = false
    } catch (e) {
        console.log(e);
        tableLoading.value = false

    }
}
getList()

//跳转到下单页面

let goPreOrder = (row) => {
    //使用弹框提示用户，是否购买
    ElMessageBox.confirm('您正在购买 ' + row.productName + ', 是否继续?', '购买提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

    })
        .then(() => {
            //2.用户点击了确认
            //直接获取当前产品的id，传递给下一个页面，然后跳转到与支付界面
            router.push({ path: "/preorder", query: { product_id: row.product_id } })
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '已取消购买'
            })
        })
}
</script>

<script>
export default {
    meta: {
        name: "vip充值",
        title: "vipCharge",
        icon: 'icon-chongzhi01'
    }
}
</script>